<template>
	<div class="ShrinkMenuItemPage d-flex flex-column m-l20">
		<div class="father-wrap m-b10">
			<div class="item-content d-flex a-center">
				<div class="title-wrap d-flex a-center">
					<span> {{ title }}</span>
					<svg-icon
						v-if="list.length > 0"
						:icon-class="
							isShow ? 'project-detail-icon-11' : 'project-detail-icon-12'
						"
						class="menu-icon"
					/>
				</div>
				<div
					class="status-wrap d-flex flex-column a-center m-l50"
					v-if="subProjectTask?.length > 0"
				>
					<span>{{ ["", "生效", "已完成"][status] || "未生效" }}</span>
					<svg-icon icon-class="project-detail-icon-8" class="status-icon" />
				</div>
				<!-- @click.prevent="toDetails" -->
				<!-- <el-select
					class="subTitle-wrap m-l50"
					v-model="taskName"
					placeholder="请选择"
					@change="change"
					:style="{
						'--is-show':
							subProjectTask && subProjectTask.length > 0 ? 'none' : 'block',
						'--cursor-style':
							subProjectTask && subProjectTask.length > 0 ? 'pointer' : '',
						'--color-style':
							subProjectTask && subProjectTask.length > 0 ? '#1A1A1A' : '',
					}"
					:disabled="subProjectTask && subProjectTask.length > 0"
				>
					<el-option
						v-for="(item, index) in subProjectTask"
						:key="index"
						:label="item.taskName"
						:value="item.taskName"
					></el-option>
				</el-select> -->

				<el-select
					class="subTitle-wrap m-l50"
					v-model="taskName"
					placeholder="请选择"
					@change="change"
					v-if="subProjectTask?.length > 0"
				>
					<el-option
						v-for="(item, index) in subProjectTask"
						:key="index"
						:label="item.taskName"
						:value="item.taskName"
					></el-option>
				</el-select>
			</div>
			<div class="time-wrap d-flex a-center m-t10">
				<svg-icon icon-class="project-detail-icon-9" class="time-icon m-l20" />
				<span class="m-l5"
					>{{ filtersTime(startTime) }}至{{ filtersTime(endTime) }}</span
				>
			</div>
		</div>
		<div class="children-wrap">
			<slot></slot>
		</div>
	</div>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElDropdown, ElSelect, ElOption } from "element-plus";

const props = defineProps({
	title: {
		type: String,
		required: true,
		default: "显示项目实施阶段名称",
	},
	status: {
		type: String,
		required: true,
		default: "未开始",
	},
	subProjectTask: Array,
	startTime: {
		type: String,
		required: true,
		default: "2023-04-28",
	},
	endTime: {
		type: String,
		required: true,
		default: "2023-04-29",
	},
	isOpen: {
		type: Boolean,
		default: false,
	},
	list: {
		type: Array,
		default: [],
	},
	taskName: {
		type: String,
		required: true,
		default: "1",
	},
});

const isShow = ref(props.isOpen);

const taskName = ref("");

watch(
	() => props.taskName,
	(newVal) => {
		if (newVal) {
			if (!props.subProjectTask.find((v) => v.taskName == props.taskName)) {
				taskName.value = "";
			} else {
				taskName.value = props.taskName;
			}
		}
	},
	{ immediate: true }
);
const filtersTime = (time) => {
	return time ? time.slice(0, 10) : "0000-00-00";
};

const change = (e) => {
	console.log("1", props.taskName);
	toDetails();
};

console.log("---list", props.list);
// const popros
const emits = defineEmits(["change"]);
const toDetails = () => {
	// if (!taskName) {
	//   return
	// }
	let item = props.subProjectTask.find((item) => {
		if (taskName.value === item.taskName) {
			return item;
		}
	});
	emits("change", item);
};
</script>

<style lang="scss" scoped>
.ShrinkMenuItemPage {
	.father-wrap {
		.item-content {
			.title-wrap {
				position: relative;
				width: 264px;
				height: 30px;
				background: #f7f7fa;
				border-radius: 6px;
				padding: 0 20px 0 20px;

				.menu-icon {
					position: absolute;
					right: 20px;
				}
			}
			.status-wrap {
				span {
					font-size: 12px;

					font-weight: 400;
					color: #1a1a1a;
				}
				.status-icon {
					width: 18px;
					height: 18px;
				}
			}

			.subTitle-wrap {
				:deep(.el-input__wrapper) {
					box-shadow: none !important;
					background-color: transparent !important;
					border: 1px solid #e3e7f1;
					height: 30px !important;
					position: relative;
					cursor: var(--cursor-style);
				}
				:deep(.el-input__wrapper .el-input__inner) {
					margin-left: 20px;
					cursor: var(--cursor-style);
					color: var(--color-style);
					-webkit-text-fill-color: var(--color-style);
				}
				:deep(.el-input__wrapper .el-input__suffix) {
					display: var(--is-show);
					position: absolute;
					right: 10px;
					cursor: var(--cursor-style);
				}
				:deep(.is-disabled) {
					cursor: var(--cursor-style);
				}
				flex: 1;
				//padding: 0 20px 0 10px;
				height: 30px;
				border-radius: 6px;
				cursor: pointer;
				position: relative;

				.title-text {
					font-size: 14px;

					font-weight: 400;
					color: #1a1a1a;
				}
				.title-text:active {
					color: #fc7018;
				}
				.gd-tip {
					position: absolute;
					right: 20px;
					font-size: 14px;

					font-weight: 500;
					color: #fc7018;
					text-decoration: underline;
				}
			}
		}
		.time-wrap {
			.time-icon {
				width: 15px;
				height: 15px;
			}
			span {
				font-size: 12px;

				font-weight: 400;
				color: #999999;
				margin-top: 3px;
			}
		}
	}
}
</style>
